<template>
  <div class="oil_card">
    <header>
       <p><img src="../assets/img/left@2x.png"></p>
       <p>我的ETC卡</p>
       <p></p>
    </header>
    <div class="oil_card_wrap">
        
        
    </div>
    
   

    <nav>
       <ul>
         <li>
           <a href="#"><img src="../assets/img/Homepage_icon@2x.png" height="39" width="39"></a> <a href="#">首页</a>
         </li>
         <li>
            <a href="#"><img src="../assets/img/assistant_icon@2x.png" height="39" width="39"></a><a href="#">助手</a>
         </li>
         <li>
            <a href="#"><img src="../assets/img/my_icon@2x.png" height="39" width="39"></a>
            <a href="#">我</a>
         </li>
       </ul>
       <!-- <router-view></router-view> -->
     </nav>
  </div>
</template>

<script>
export default {
  name: 'oil_card',
  data () {
    return {
      msg: 'Welcome to mine.vue'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '../assets/less/style.less';
.mine {
  header {
     .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(30,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        .font(30,#fff);
      }
    }
   
  nav {
    .px2rem(height,98);
    /* .border(1,solid,#000); */
    background: #fff;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    ul {
      height: 100%;
      display: flex;
      li {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &:nth-child(1){
          a:nth-child(1){
            img {
              .px2rem(height,39);
              .px2rem(width,39);
            }
          }
        }
        &:nth-child(2){
          a:nth-child(1){
            img {
              .px2rem(height,36);
              .px2rem(width,36);
            }
          }
        }
        &:nth-child(3){
          a:nth-child(1){
            img {
              .px2rem(height,38);
              .px2rem(width,34);
            }
          }
        }
        a {
          display: block;
        }
      }
    }
  }
}


</style>

